<script setup lang="ts">
import {ref} from "vue"
import {isEmptyString} from "@/utils/string";
import {getDownloadUrl} from "@/api/file";
import * as FileApis from "@/api/file";
import {formatDateStr} from "@/utils/time";
import {formatNumberSimple} from "@/utils/math";
import {ArticlePageResp} from "@/api/article/types";
import UserProfile from "@/components/article/UserProfile.vue";
import UserAvatar from "@/components/common/UserAvatar.vue";

defineProps<{
  articleList: ArticlePageResp[],
  showAuthor?: boolean
}>()
const userProfileVisible = ref(false)
</script>

<template>
  <div>
    <ul class="mt-3">
      <li v-for="article in articleList" class="article-item">
        <div class="flex flex-row article-item-row h-[140px]">
          <!--封面-->
          <div v-if="!isEmptyString(article.coverImage)"
               class="w-1/3 h-full shrink-0 rounded-lg overflow-hidden">
            <RouterLink class="guide-a" :to="'/article/detail/' + article.id">
              <el-image :src="getDownloadUrl(article.coverImage)" fit="cover"
                        class="article-item-image h-full w-full "></el-image>
            </RouterLink>
          </div>
          <div class="article-item-content ml-5 flex-1 relative">
            <!--分类-->
            <RouterLink :to="`/article/category/${article.categoryId}?cn=${article.categoryName}`" class="absolute top-0 right-0 ">
              <div class="text-xs py-1 px-2 bg-gray-400 text-white rounded opacity-80 hover:bg-gray-600 select-none">{{article.categoryName}}</div>
            </RouterLink>
            <!--标题-->
            <RouterLink class="guide-a" :to="'/article/detail/' + article.id"><h4
                class="article-item-title text-xl text-black mb-3">{{ article.title }}</h4>
            </RouterLink>
            <!--摘要-->
            <div class="mb-3">
              <el-text class="text-base text-gray-500" line-clamp="2">{{ article.summary }}</el-text>
            </div>
            <!--发布信息-->
            <div class="article-item-meta flex flex-row text-sm">
              <!-- 作者 -->
              <div class="flex flex-row items-center">
                <RouterLink :to="`/user/center/${article.authorId}`" v-if="showAuthor">
                  <span class="flex items-center meta-author">
                    <el-popover
                        :width="300"
                        v-model:visible="article.userProfileVisible"
                        placement="bottom">
                    <template #reference>
                         <UserAvatar :size="18" :file-id="article.authorAvatar"></UserAvatar>
                    </template>
                    <template #default>
                       <UserProfile :user-id="article.authorId"  v-if="article.userProfileVisible"></UserProfile>
                    </template>
                  </el-popover>
                  <span class="text-gray-400 ml-1 select-none hover-primary">{{ article.authorName }}</span>
                </span>
                </RouterLink>
                <span class="ml-2 text-gray-400">
                                   发布于 {{
                    formatDateStr(article.publishedTime, '{y}年{m}月{d}日')
                  }}
                                </span>
              </div>
              <div class="flex-1 flex justify-end justify-items-end">
                                <span title="浏览量" class="flex items-center text-gray-400"><el-icon
                                    color="var(--color-gray-400)" class="mr-0.5"><View/></el-icon> {{
                                    formatNumberSimple(article.viewCount)
                                  }}</span>
                <span title="点赞数" class="flex items-center text-gray-400 ml-3"><img alt="Icon"
                                                                                       width="14"
                                                                                       height="14"
                                                                                       src="/svg/good.svg"
                                                                                       class="mr-0.5"/> {{
                    formatNumberSimple(article.starCount)
                  }}</span>
                <span title="评论数" class="flex items-center text-gray-400 ml-3"><el-icon
                    color="var(--color-gray-400)" class="mr-0.5"><ChatLineRound/></el-icon> {{
                    formatNumberSimple(article.commentCount)
                  }}</span>
              </div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.article-item-content {
  display: grid;
  grid-template-rows: min-content auto 24px;
  row-gap: 0;
  width: 100%;
}

.article-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制为2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.article-item-image {
  transition: transform 0.5s ease;
}

.article-item-image:hover {
  transform: scale(1.1);
}
</style>